﻿<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="basePath" value="${pageContext.request.contextPath}"/>

<div id="createDialog" class="crudDialog">
    <form id="createForm" method="post" class="form-horizontal">
        <div class="row">
            <div class="col-lg-12">
                <div class="form-group">
                    <label for="name" class="col-sm-1 control-label">姓名</label>
                    <div class="col-sm-5"><input type="text" id="name" name="name" class="form-control"></div>
                    <label for="nickName" class="col-sm-1 control-label">昵称</label>
                    <div class="col-sm-5"><input type="text" id="nickName" name="nickName" class="form-control"></div>
                </div>

                <div class="form-group">
                    <label for="sex_1" class="col-sm-1 control-label">性别</label>
                    <div class="col-sm-5 radio">
                        <div class="radio radio-inline radio-info">
                            <input id="sex_1" type="radio" name="sex" value="1" checked>
                            <label for="sex_1">男 </label>
                        </div>
                        <div class="radio radio-inline radio-danger">
                            <input id="sex_2" type="radio" name="sex" value="2">
                            <label for="sex_2">女 </label>
                        </div>
                    </div>
                    <label for="birthday" class="col-sm-1 control-label">生日</label>
                    <div class="col-sm-5">
                        <div class="input-group date">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            <input type="text" id="birthday" name="birthday" class="form-control">
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label for="idNumber" class="col-sm-1 control-label">身份证</label>
                    <div class="col-sm-5"><input type="text" id="idNumber" name="idNumber" class="form-control"></div>

                    <label for="enrolmentTime" class="col-sm-1 control-label">入校时间</label>
                    <div class="col-sm-5">
                        <div class="input-group date">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            <input type="text" id="enrolmentTime" name="enrolmentTime" class="form-control">
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label for="classId" class="col-sm-1 control-label">班级</label>
                    <div class="col-sm-5">
                        <select id="classId" name="classId" style="width: 100%">
                            <c:forEach var="schClass" items="${schClasses}">
                                <option value="${schClass.classId}"
                                        <c:if test="${student.classId==schClass.classId}">selected</c:if>>${schClass.name}</option>
                            </c:forEach>
                        </select>

                    </div>
                    <label for="avatar" class="col-sm-1 control-label">头像</label>
                    <div class="col-sm-3"><input type="text" id="avatar" name="avatar" class="form-control"/>
                        <div id="fileList" class="uploader-list"></div>
                    </div>
                    <div class="col-lg-2">
                        <div id="picker">上传头像</div>
                    </div>
                </div>

                <div class="form-group">
                    <label for="address" class="col-sm-1 control-label">地址</label>
                    <div class="col-sm-5"><input type="text" id="address" name="address" class="form-control"></div>
                    <label for="status_1" class="col-sm-1 control-label">状态</label>
                    <div class="col-sm-5 radio">
                        <div class="radio radio-inline radio-info">
                            <input id="status_1" type="radio" name="status" value="1" checked>
                            <label for="status_1">正常</label>
                        </div>
                        <div class="radio radio-inline radio-danger">
                            <input id="status_2" type="radio" name="status" value="-1">
                            <label for="status_2">禁用 </label>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label for="description" class="col-sm-1 control-label">简介</label>
                    <div class="col-sm-11"><input type="text" id="description" name="description" class="form-control"></div>
                </div>
            </div>
        </div>


        <div class="form-group text-right dialog-buttons">
            <a class="waves-effect waves-button" href="javascript:;" onclick="createSubmit();">保存</a>
            <a class="waves-effect waves-button" href="javascript:;" onclick="createDialog.close();">取消</a>
        </div>
    </form>
</div>
<script>

    $('.input-group.date').datepicker({
        todayBtn: "linked",
        keyboardNavigation: false,
        forceParse: false,
        calendarWeeks: true,
        autoclose: true
    });

    function initUploader() {
        //百度上传按钮
        var uploader = WebUploader.create({
            // swf文件路径
            swf: '${basePath}/resources/zheng-ui/js/plugins/webuploader-0.1.5/Uploader.swf',
            // 文件接收服务端
            method: 'POST',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: {
                "id": '#picker',
                "multiple": false
            },
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false,
            // 选完文件后，是否自动上传。
            auto: false,
            // 只允许选择图片文件
            accept: {
                title: '图片文件',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
        uploader.on('fileQueued', function (file) {
            var $li = $(
                '<div id="' + file.id + '" class="webuploader-file-item thumbnail">' +
                '<img>' +
                '<div class="info">' + file.name + '</div>' +
                '</div>'),
                $img = $li.find('img');
            $("#fileList").empty();
            $("#fileList").append($li);

            var thumbnailWidth = 100, thumbnailHeight = 100;
            uploader.makeThumb(file, function (error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }

                $img.attr('src', src);
            }, thumbnailWidth, thumbnailHeight);
            $.ajax({
                url: '${ZHENG_OSS_QINIUYUN_OSS_POLICY}',
                type: 'GET',
                dataType: 'jsonp',
                jsonp: 'callback',
                success: function (result) {
                    var suffix = get_suffix(file.name);
                    var random_name = random_string();
                    uploader.options.formData.key = result.dir + '/' + random_name + suffix;
                    uploader.options.formData.token = result.upToken;
                    uploader.options.server = result.action;
                    uploader.upload();
                },
                error: function (msg) {
                    console.log(msg);
                }
            });
        });
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id),
                $percent = $li.find('.progress span');

            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<p class="progress"><span></span></p>')
                    .appendTo($li)
                    .find('span');
            }
            $percent.css('width', percentage * 100 + '%');
        });

        uploader.on('uploadSuccess', function (file, response) {
            alert(1);
            $('#avatar').val(response.data.filename).focus();
            $('#' + file.id).addClass('upload-state-done');
        });
        uploader.on('uploadError', function (file) {
            alert(2);
            console.log('uploadError', file);
            var $li = $('#' + file.id),
                $error = $li.find('div.error');

            // 避免重复创建
            if (!$error.length) {
                $error = $('<div class="error"></div>').appendTo($li);
            }
            $error.text('上传失败');
        });
        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').remove();
        });
    }
    // 根据路径获取后缀
    function get_suffix(filename) {
        var pos = filename.lastIndexOf('.');
        var suffix = '';
        if (pos != -1) {
            suffix = filename.substring(pos);
        }
        return suffix;
    }
    // 随机字符串
    function random_string(len) {
        len = len || 32;
        var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        var maxPos = chars.length;
        var pwd = '';
        for (i = 0; i < len; i++) {
            pwd += chars.charAt(Math.floor(Math.random() * maxPos));
        }
        return pwd;
    }

    function createSubmit() {
        $.ajax({
            type: 'post',
            url: '${basePath}/manage/student/create',
            data: $('#createForm').serialize(),
            beforeSend: function () {
                if ($('#name').val() == '') {
                    $('#name').focus();
                    return false;
                }
            },
            success: function (result) {
                if (result.code != 1) {
                    if (result.data instanceof Array) {
                        $.each(result.data, function (index, value) {
                            $.confirm({
                                theme: 'dark',
                                animation: 'rotateX',
                                closeAnimation: 'rotateX',
                                title: false,
                                content: value.errorMsg,
                                buttons: {
                                    confirm: {
                                        text: '确认',
                                        btnClass: 'waves-effect waves-button waves-light'
                                    }
                                }
                            });
                        });
                    } else {
                        $.confirm({
                            theme: 'dark',
                            animation: 'rotateX',
                            closeAnimation: 'rotateX',
                            title: false,
                            content: result.data.errorMsg,
                            buttons: {
                                confirm: {
                                    text: '确认',
                                    btnClass: 'waves-effect waves-button waves-light'
                                }
                            }
                        });
                    }
                } else {
                    createDialog.close();
                    $table.bootstrapTable('refresh');
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                $.confirm({
                    theme: 'dark',
                    animation: 'rotateX',
                    closeAnimation: 'rotateX',
                    title: false,
                    content: textStatus,
                    buttons: {
                        confirm: {
                            text: '确认',
                            btnClass: 'waves-effect waves-button waves-light'
                        }
                    }
                });
            }
        });
    }
</script>